<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Awareness Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--flexslider-->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!--//flexslider-->
<link href='https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700,800,600,500' rel='stylesheet' type='text/css'>
</head>
<body> 
<!--header-->	
<div class="header" >
	<div class="col-md-3 header-top cbp-spmenu-push">
		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
			<a  href="index.html">主页</a>
			<a  href="about.html">关于</a>
			<a  href="services.html">服务</a>
			<a  href="single.html" >留言板</a>
			<a  href="contact.html">联系我们</a>
		</nav>
		<!-- /script-nav -->
			<div class="main">
				<section class="buttonset">
					<button id="showLeftPush"><i  class="glyphicon glyphicon-menu-hamburger"></i></button>
				</section>
			</div>
			<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
				<script src="js/classie.js"></script>
					<script>
						var	menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
						showLeftPush = document.getElementById( 'showLeftPush' ),
						body = document.body;
							
						showLeftPush.onclick = function() {
							classie.toggle( this, 'active' );
							classie.toggle( body, 'cbp-spmenu-push-toright' );
							classie.toggle( menuLeft, 'cbp-spmenu-open' );
							disableOther( 'showLeftPush' );
						};
					</script>
	</div>
	<div class="col-md-6 logo">
		<h1><a href="index.html"><span>·</span>BOOOK</a></h1>
	</div>
	<div class="col-md-3 search">
		<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i></a>
	</div>
	<div class="clearfix"> </div>
</div>
	<!---pop-up-box---->					  
	<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
	<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
	<!---//pop-up-box---->
	<div id="small-dialog" class="mfp-hide">
		<div class="search-top">
			<div class="login">
				<input type="submit" value="">
				<input type="text" value="搜索.." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search..';}">		
			</div>
			<p>Books</p>
		</div>				
	</div>
		 <script>
			$(document).ready(function() {
			$('.popup-with-zoom-anim').magnificPopup({
			type: 'inline',
			fixedContentPos: false,
			fixedBgPos: true,
			overflowY: 'auto',
			closeBtnInside: true,
			preloader: false,
			midClick: true,
			removalDelay: 300,
			mainClass: 'my-mfp-zoom-in'
			});
																						
			});
		</script>		
<!--//header-->
<!--banner-->
<div class="banner">
	<div class="container">
	
		<div class="slider">
				
			           <section class="slider">
               <div class="flexslider">
                   <ul class="slides">
 	    				<li>
                      		<div class="banner-matter">
			                   	<h3>时  光  邮  局</h3>
								<p>时间的齿轮步履不停，我们的记忆却历久弥新。</p>
								
							</div>
  	    				</li>
  	    				<li>
                      		<div class="banner-matter">
			                   	<h3>观  影  空  间</h3>
								<p>荧幕里是故事，荧幕外是人生。</p>
								
							</div>
  	    				</li>
  	    				<li>
                      		<div class="banner-matter">
			                   	<h3>甜  品  小  铺</h3>
								<p>精神富足也不要饿着自己哦！</p>
								
							</div>
  	    				</li>
  	    			
         			 </ul>
       		 </div>
      	</section>
		
			  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
			  <!--FlexSlider-->
			  <script defer src="js/jquery.flexslider.js"></script>
			  <script type="text/javascript">
			    $(function(){
			      SyntaxHighlighter.all();
			    });
			    $(window).load(function(){
			      $('.flexslider').flexslider({
			        animation: "slide",
			        start: function(slider){
			          $('body').removeClass('loading');
			        }
			      });
			    });
			  </script>
		</div>
	</div>
</div>
<!--content-->
<div class="content">
	<div class="container">
		<div class="col-top">
			<h2>项目</h2>
			<!--<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>-->
		</div>
	</div>
	<div class="content-top">
		<div class=" col-md-3 grid-top">
			<i class="glyphicon glyphicon-education"></i>
				 <div class="caption">
					<h4>书</h4>
					<p>书籍是人类进步的阶梯。</p>
				</div>
			</div>
			<div class=" col-md-3 grid-top">
				<i class="glyphicon glyphicon-lamp"></i>
				  <div class="caption">
					<h4>影</h4>
					<p>千奇百怪的人生万象。</p>
				</div>
			</div>
			<div class=" col-md-3 grid-top">
				 <i class="glyphicon glyphicon-time "></i>
				  <div class="caption">
					<h4>邮</h4>
					<p>时间的沉淀。</p>				 
				</div>
			</div>
			<div class=" col-md-3 grid-top">				
				 <i class="glyphicon glyphicon-hourglass"></i>
				  <div class="caption">
					<h4>甜</h4>
					<p>甜品即正义。</p>
				  </div>
			</div>
		<div class="clearfix"> </div>	
	</div>
	<div class="content-middle">
		<div class="container">
			<div class="col-mid">
			<h3>品牌特色</h3>
			<!--<p>时  光  邮  局</p>-->
		</div>
		<div class="content-middle1">
			<div class="col-md-4 content-middle2">
				<a href="single.html"><img src="images/ga.jpg" class="img-responsive" alt=""></a>
				<div class="content-middle3">
					<h4><a href="single.html">时光邮局</a></h4>
					<label></label>
					<p>记录当下的心情，给未来某天的自己准备一个惊喜吧！</p>
				</div>
			</div>
			<div class="col-md-4 content-middle2">
				<a href="single.html"><img src="images/pi.jpg " class="img-responsive" alt=""></a>
				<div class="content-middle3">
					<h4><a href="single.html">观影空间</a></h4>
					<label></label>
					<p>闲暇时间约上三五好友，一起给心灵放个假。</p>
				</div>
			</div>
			<div class="col-md-4 content-middle2">
				<a href="single.html"><img src="images/pi1.jpg " class="img-responsive" alt=""></a>
				<div class="content-middle3">
					<h4><a href="single.html">甜美小铺</a></h4>
					<label></label>
					<p>甜品治愈一切不开心，要不要来这给身体充充电呢？</p>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		</div>
	</div>
	<!---->
	<div class="middle-content">
		<div class="container">
			<div class="middle-content1">
					<h3>华美珍贵的事物总是很快逝去，而且一去不复返。</h3>			
			</div>
		</div>
	</div>
	<div class="event-news">
		<div class="container">
		<div class="content-events">
				<h3> 文学大家 &amp; 作品</h3>
			</div>	
				<div class="news">
					<div class="col-md-4 new-more">
						<div class="now-more1">
							<div class="event">
								<h4>23/04/1564</h4>
								<label></label>
								<h6><a href="single.html">Shakespeare</a></h6>
								<p>英国文艺复兴时期剧作家、诗人。代表作：《罗密欧与朱丽叶》《仲夏夜之梦》《哈姆雷特》《李尔王》《麦克白》等。</p>
							<a href="single.html" class="hvr-rectangle-out ">留言板</a>
							</div>
						</div>
					</div>
					<div class="col-md-4 new-more">
						<div class="now-more1">
							<div class="event">
								<h4>04/02/1958</h4>
								<label></label>
								<h6><a href="single.html">东野圭吾</a></h6>
								<p>日本推理小说作家。<br >代表作：《放学后》《秘密》《白夜行》《嫌疑人X的献身》《预知梦》《湖畔》等。</p>
							<a href="single.html" class="hvr-rectangle-out ">留言板</a>
							</div>
						</div>
					</div>
					<div class="col-md-4 new-more">
						<div class="now-more1">
							<div class="event">
								<h4>21/11/1910</h4>
								<label></label>
								<h6><a href="single.html">钱钟书 </a></h6>
								<p>中国现代作家、文学研究家，与饶宗颐并称为“南饶北钱”。代表作：《围城》《谈艺录》《写在人生边上》等。</p>
							<a href="single.html" class="hvr-rectangle-out ">留言板</a>
							</div>
						</div>
					</div>
						<div class="clearfix"> </div>
				</div>
			</div>
</div>
</div>
<!--//content-->
<!--footter-->
<div class="footer">
	<div class="footer-mid">
			<div class="container">
				<div class="col-sm-3 ft-grid1">
					<h3>Location</h3>
					<p>CHINA XTU</p>
					<P>Contact@example.com</P>
					<p>+12 312 341 234</p>
				</div>
				<div class="col-sm-3 ft-grid2">
				<h3>Follow Us</h3>
					<ul class="social-in">
						<li><a href="#"><i> </i></a></li>						
						<li><a href="#"><i class="twitter"> </i></a></li>
						<li><a href="#"><i class="dribbble"> </i></a></li>						
					</ul>
				</div>
				<div class="col-sm-6 ft-grid1">
					<h3>Newsletter</h3>
					<form>
						<input type="text" value="" onFocus="this.value='';" onBlur="if (this.value == '') {this.value ='';}">
						<input type="submit" value="提交">
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="class-footer">
			<div class="container">
				<div class="col-md-6 footer-nav">
					<ul>
						<li ><a  href="index.html" >主页</a></li>
						<li><a  href="about.html"  >关于我们</a></li>
						<li><a href="services.html">服务</a></li>
						<li><a  href="single.html" >留言板</a></li>
						<li><a href="contact.html" >联系我们</a></li>
					</ul>
				</div>
				<div class="col-md-6 footer-grid">
					<p >Copyright &copy; BOOOK书店</p>	
				</div>
					<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--//footter-->
</body>
</html>